<template>
    <div>
        <ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.id">
					<router-link :to="'/home/newsinfo/'+item.id">
						<img class="mui-media-object mui-pull-left" :src="item.img_url">
						<div class="mui-media-body">
							<h1>{{ item.title }}</h1>
							<p class='mui-ellipsis'>
                                <span>发表时间：{{ item.add_time | dateFormat }}</span>
                                <span>点击：{{ item.click }}次</span>
                                </p>
						</div>
					</router-link>
				</li>
			</ul>
    </div>
</template>
<script>
import { Toast } from "mint-ui";

export default {
    data() {
        return {
            newslist: []
        };
    },
    created() {
        this.getNewsList();
    },
    methods:{
        getNewsList(){
            //获取轮播图数据的方法
            // this.$http.get("http://vue.studyit.io/api/getlunbo").then(result => {
            //console.log(result.body);
            var body={
                status:0,
                message:[
                    {
                        id: 13,
                        title: "一季度多家房企利润跌幅50%去库存促销战打响",
                        add_time:"2015-04-16T03:50:28.000Z",
                        zhaiyao:"房企一季度业绩已经陆续公布克而瑞研究中心统计",
                        click:1,
                        img_url:
                        "http://img4.imgtn.bdimg.com/it/u=3415244797,3645437497&fm=26&gp=0.jpg"
                    },
                    {
                        id: 14,
                        title: "二季度多家房企利润跌幅50%去库存促销战打响",
                        add_time:"2015-05-16T03:50:28.000Z",
                        zhaiyao:"房企二季度业绩已经陆续公布克而瑞研究中心统计",
                        click:2,
                        img_url:
                        "http://img0.imgtn.bdimg.com/it/u=3385748430,3965041078&fm=26&gp=0.jpg"
                    },
                    {
                        id: 15,
                        title: "三季度多家房企利润跌幅50%去库存促销战打响",
                        add_time:"2015-06-16T03:50:28.000Z",
                        zhaiyao:"房企三季度业绩已经陆续公布克而瑞研究中心统计",
                        click:3,
                        img_url:
                        "http://img4.imgtn.bdimg.com/it/u=1506620215,1015726317&fm=26&gp=0.jpg"
                    },
                    {
                        id: 16,
                        title: "四季度多家房企利润跌幅50%去库存促销战打响",
                        add_time:"2015-07-16T03:50:28.000Z",
                        zhaiyao:"房企四季度业绩已经陆续公布克而瑞研究中心统计",
                        click:4,
                        img_url:
                        "http://img4.imgtn.bdimg.com/it/u=2151512043,3431660441&fm=26&gp=0.jpg"
                    },
                    {
                        id: 17,
                        title: "四季度多家房企利润跌幅50%去库存促销战打响",
                        add_time:"2015-07-16T03:50:28.000Z",
                        zhaiyao:"房企四季度业绩已经陆续公布克而瑞研究中心统计",
                        click:4,
                        img_url:
                        "http://img4.imgtn.bdimg.com/it/u=2151512043,3431660441&fm=26&gp=0.jpg"
                    },
                    {
                        id: 18,
                        title: "四季度多家房企利润跌幅50%去库存促销战打响",
                        add_time:"2015-07-16T03:50:28.000Z",
                        zhaiyao:"房企四季度业绩已经陆续公布克而瑞研究中心统计",
                        click:4,
                        img_url:
                        "http://img4.imgtn.bdimg.com/it/u=2151512043,3431660441&fm=26&gp=0.jpg"
                    },
                    {
                        id: 19,
                        title: "四季度多家房企利润跌幅50%去库存促销战打响",
                        add_time:"2015-07-16T03:50:28.000Z",
                        zhaiyao:"房企四季度业绩已经陆续公布克而瑞研究中心统计",
                        click:4,
                        img_url:
                        "http://img4.imgtn.bdimg.com/it/u=2151512043,3431660441&fm=26&gp=0.jpg"
                    },
                    {
                        id: 20,
                        title: "四季度多家房企利润跌幅50%去库存促销战打响",
                        add_time:"2015-07-16T03:50:28.000Z",
                        zhaiyao:"房企四季度业绩已经陆续公布克而瑞研究中心统计",
                        click:4,
                        img_url:
                        "http://img4.imgtn.bdimg.com/it/u=2151512043,3431660441&fm=26&gp=0.jpg"
                    },
                    {
                        id: 21,
                        title: "四季度多家房企利润跌幅50%去库存促销战打响",
                        add_time:"2015-07-16T03:50:28.000Z",
                        zhaiyao:"房企四季度业绩已经陆续公布克而瑞研究中心统计",
                        click:4,
                        img_url:
                        "http://img4.imgtn.bdimg.com/it/u=2151512043,3431660441&fm=26&gp=0.jpg"
                    },
                    {
                        id: 22,
                        title: "四季度多家房企利润跌幅50%去库存促销战打响",
                        add_time:"2015-07-16T03:50:28.000Z",
                        zhaiyao:"房企四季度业绩已经陆续公布克而瑞研究中心统计",
                        click:4,
                        img_url:
                        "http://img4.imgtn.bdimg.com/it/u=2151512043,3431660441&fm=26&gp=0.jpg"
                    },
                    {
                        id: 23,
                        title: "四季度多家房企利润跌幅50%去库存促销战打响",
                        add_time:"2015-07-16T03:50:28.000Z",
                        zhaiyao:"房企四季度业绩已经陆续公布克而瑞研究中心统计",
                        click:4,
                        img_url:
                        "http://img4.imgtn.bdimg.com/it/u=2151512043,3431660441&fm=26&gp=0.jpg"
                    },
                    {
                        id: 24,
                        title: "四季度多家房企利润跌幅50%去库存促销战打响",
                        add_time:"2015-07-16T03:50:28.000Z",
                        zhaiyao:"房企四季度业绩已经陆续公布克而瑞研究中心统计",
                        click:4,
                        img_url:
                        "http://img4.imgtn.bdimg.com/it/u=2151512043,3431660441&fm=26&gp=0.jpg"
                    }
                    ]
                };
            if (body.status === 0) {
                this.newslist = body.message;
                // Toast('获取新闻列表页失败...');
            } else {
                Toast("获取新闻列表页失败...");
            }
            // });
   }
 }
};
</script>


<style lang="scss" scoped>
.mui-table-view{
    li{
         h1{font-size: 14px}
         .mui-ellipsis{
             font-size: 12px;
             color: #226aff;
             display: flex;
             justify-content: space-between;
         }
    }
}
</style>